<template>
  <AsyncSuspense :loader="loadControl" :onload="onPageLoad">
    <template #default="{ data }">
      <slot :control="data"></slot>
    </template>
  </AsyncSuspense>
</template>

<script setup lang="ts">
import { loadDatasource } from '@/controller/demo/utils'
import type { BaseController } from '@/controller/BaseAppliance/definition'
import type { DemoDatasource } from '@/demo/types'
import AsyncSuspense from '@/common/asyncSuspense.vue'

const props = defineProps<{
  controlCreator: (datasource: DemoDatasource) => BaseController.Control
  // demo数据加载路径
  datasource: string
}>()

async function loadControl() {
  const datasource = await loadDatasource(props.datasource)
  const control = props.controlCreator(datasource)
  return control
}

function onPageLoad(control: BaseController.Control) {
  control?.worker.triggerOnLoad()
  control?.worker.triggerOnShow()
}
</script>
